<template>
	<div class="container">
		
		<div class="doc-content">
			<div class="title">
				表格说明文档
			</div>
			<div class="sub-title quote">
				表格组件包含 table、table-column两个组件<br>
				你只需要引入Table，即可使用两个组件
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<div class="example-sub-title quote">
				使用v-slot方式来获取注入的rowData对象，代表了每一行的数据
			</div>
			<Demo>
				<template slot="view">
					<gr-table :width="840" :tableData="tableData1">
						<template v-slot="{rowData}">
							<gr-table-column label="日期" width="120">
								{{rowData.regDate}}
							</gr-table-column>
							<gr-table-column label="用户名" width="120">
								<gr-button round flat size="mini" color="primary"> {{rowData.username}} </gr-button>
							</gr-table-column>
							<gr-table-column label="详细地址" width="300">
								{{rowData.address}}
							</gr-table-column>
							<gr-table-column label="用户状态" width="100">
								<template v-if="rowData.state==1">
									<gr-icon name="success" color="#10BD40" size="17px"></gr-icon>已审核
								</template>
								<template v-else>
									<gr-icon name="warning" color="#F8D775" size="17px"></gr-icon>待审核
								</template>
							</gr-table-column>
						</template>
					</gr-table>
				</template>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</Demo>
			
			<div class="example-title">&lt;gr-table&gt;属性</div>
			<gr-table :width="1000" :tableData="propertiesExplain1" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="120">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="140">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="140">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			<div class="example-title">&lt;gr-table-column&gt;属性</div>
			<gr-table :width="1000" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="120">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="140">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="140">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo,
			CodeView
		},
		data() {
			return {
				tableData1: [
					{username:'zhangsna', regDate:'2019-12-28', address: '详细地址详细地址详细地址', state: 1},
					{username:'lisi', regDate:'2020-01-12', address: '详细地址详细地址详细地址', state: 0}
				],
				jsCode1: `import {Table} from 'gabriel-ui'
Vue.use(Table)`,
				htmlCode2: `<!-- html代码部分 -->
<template>
	<gr-table :width="840" :tableData="tableData">
		<template v-slot="{rowData}">
			<gr-table-column label="日期" width="120"> {{rowData.regDate}} </gr-table-column>
			<gr-table-column label="用户名" width="120">
				<gr-button round flat size="mini" color="primary"> {{rowData.username}} </gr-button>
			</gr-table-column>
			<gr-table-column label="详细地址" width="300">
				{{rowData.address}}
			</gr-table-column>
			<gr-table-column label="用户状态" width="100">
				<template v-if="rowData.state==1">
					<gr-icon name="success" color="#10BD40" size="17px"></gr-icon>已审核
				</template>
				<template v-else>
					<gr-icon name="warning" color="#F8D775" size="17px"></gr-icon>待审核
				</template>
			</gr-table-column>
		</template>
	</gr-table>
</template>
`,
				jsCode2: `/* Javascript代码部分 */
data() {
	tableData: [
		{username:'zhangsna', regDate:'2019-12-28', address: '详细地址详细地址详细地址', state: 1},
		{username:'lisi', regDate:'2020-01-12', address: '详细地址详细地址详细地址', state: 0}
	]
}`,
				propertiesExplain1: [
					{
						attrName: 'width',
						introduce: `表格的宽度`,
						type: 'Number/String',
						optionValues: '----',
						defaultValue: '100%'
					},
					{
						attrName: 'tableData',
						introduce: `填充表格的数据，它应当是一个对象数组，每个对象对应了表格中的一行`,
						type: 'Array[Object]',
						optionValues: '----',
						defaultValue: '[]空数组'
					}
				],
				propertiesExplain2: [
					{
						attrName: 'width',
						introduce: `该列的宽度权重`,
						type: 'Number',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'label',
						introduce: `该列的表头名称`,
						type: 'String/Number',
						optionValues: '----',
						defaultValue: '----'
					}
				]
			}
		},
		mounted() {
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.doc-content {
		margin: auto;
		width: 1000px !important;
		padding: 20px;
	}
</style>
